<template>
  <div class="sidebar">
    <h3 class="sidebar-title">
      <slot name="title"></slot>
    </h3>
    <ul class="sidebar-menu">
      <li><a href="javascript:;" :class="activeKey===0 && 'active'" @click="handleClick(0)" data-section="home">首页</a></li>
      <li><a href="javascript:;" :class="activeKey===1 && 'active'" @click="handleClick(1)" data-section="construction" class="">建设概况</a></li>
      <li><a href="javascript:;" :class="activeKey===2 && 'active'" @click="handleClick(2)" data-section="policy" class="">政策资讯</a></li>
      <li><a href="javascript:;" :class="activeKey===3 && 'active'" @click="handleClick(3)" data-section="activity" class="">活动报道</a></li>
      <li><a href="javascript:;" :class="activeKey===4 && 'active'" @click="handleClick(4)" data-section="service" class="">服务介绍</a></li>
    </ul>
  </div>
</template>
<script setup>

import {ref} from "vue";
const emit = defineEmits(['sidebar-click']); // 这是获取上下文的方式

const activeKey = ref(0)

const handleClick = (key) => {
  activeKey.value = key;
  emit('sidebar-click', key);
}

</script>
<style scoped>
.sidebar {
  width: 250px;
  background-color: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
  margin-right: 30px;
}

.sidebar-title {
  font-size: 18px;
  color: #1e5799;
  padding-bottom: 10px;
  border-bottom: 2px solid #f0f0f0;
  margin-bottom: 20px;
}

.sidebar-menu {
  list-style: none;
}

.sidebar-menu li {
  margin-bottom: 15px;
}

.sidebar-menu a {
  display: block;
  color: #555;
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 4px;
  transition: all 0.3s;
}

.sidebar-menu a:hover,
.sidebar-menu a.active {
  background-color: #f0f7ff;
  color: #1e5799;
  font-weight: bold;
}

.sidebar-menu a.active {
  border-left: 4px solid #207cca;
}
</style>